<template>
  <div>
    <div class="approval-Pop" :class="popRecord.nodeType === 'start' || popRecord.nodeType === 'notifier' ? 'approval-Pop14' : null">
      <div class="approval-Pop-triangle-up"></div>
      <div class="approval-Pop-box">
        <a-row class="approval-Pop-font">
          <a-col :span="7" class="approval-Pop-font-left" style="margin-top:15px">{{ popRecord.nodeName }}：</a-col>
          <a-col :span="16" v-if="popRecord.userFlowApproverList">
            <a-col :span="8" v-for="(i, index) in popRecord.userFlowApproverList" :key="index">
              <a-popover>
                <template slot="content">
                  <p>审核备注:{{ i.approverOpinion || "暂无填写" }}</p>
                </template>
                <div class="approval-Pop-pois">
                  <a-avatar icon="user" :size="32" :src="i.approverUserAvatar || null" />
                  <a-icon
                    v-if="i.status != 0"
                    :type="getApprovalStatusIcon(i.status)"
                    :style="{
                      fontSize: '16px',
                      color: '#fff',
                      background: getApprovalStatusColor(i.status),
                      borderRadius: '50%'
                    }"
                    class="approval-Pop-abso"
                  />
                </div>
              </a-popover>

              <div class="approval-Pop-colfff" style="padding-top: 3px">{{ i.approverUserName }}</div>
            </a-col>
          </a-col>
          <a-col v-else :span="16">
            <a-col :span="8" v-for="(i, index) in popRecord.approUserList" :key="index">
              <div class="approval-Pop-pois">
                <a-avatar icon="user" :size="32" :src="i.avatar || null" />
              </div>
              <div class="approval-Pop-colfff" style="padding-top: 3px">{{ i.userName }}</div>
            </a-col>
          </a-col>
        </a-row>
        <a-row class="approval-Pop-font">
          <a-col :span="7" class="approval-Pop-font-left"
            >{{ popRecord.nodeType === "notifier" ? "抄送时间" : popRecord.nodeType === "start" ? "申请时间" : "审批时间" }}：</a-col
          >
          <a-col :span="12" class="approval-Pop-colfff">
            {{ popRecord.gmtNodeEnd ? moment(popRecord.gmtNodeEnd).format("YYYY-MM-DD HH:mm") : "" }}
          </a-col>
        </a-row>
        <a-row class="approval-Pop-font" v-if="popRecord.nodeType !== 'start' && popRecord.nodeType !== 'notifier'">
          <a-col :span="7" class="approval-Pop-font-left">审批状态：</a-col>
          <a-col :span="12" :style="{ color: getApprovalStatusColorBlue(popRecord.approStatus) }">
            {{ getApprovalStatus(popRecord.approStatus) }}
          </a-col>
        </a-row>
        <!-- <a-row class="approval-Pop-font">
          <a-col :span="7" class="approval-Pop-font-left">审批备注：</a-col>
          <a-col :span="12" class="approval-Pop-colfff">
            {{
            popRecord.gmtNodeEnd ? moment(popRecord.gmtNodeEnd).format("YYYY-MM-DD HH:mm") : ""
            }}
          </a-col>
        </a-row>-->
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import { getApprovalStatus, getApprovalStatusIcon, getApprovalStatusColorBlue, getApprovalStatusColor } from "../funcs";
export default {
  props: ["approvalRecord"],
  watch: {
    approvalRecord: {
      handler(val, oldval) {
        // console.log("123123", val);
        if (val) {
          this.creatApprovalProcess(val);
        }
      },
      immediate: true,
      deep: true
    }
  },
  data() {
    return {
      popRecord: null
    };
  },
  methods: {
    getApprovalStatus,
    getApprovalStatusIcon,
    getApprovalStatusColorBlue,
    getApprovalStatusColor,
    moment,
    creatApprovalProcess(val) {
      this.popRecord = val;
    }
  }
};
</script>

<style scoped>
.approval-Pop {
  position: absolute;
  bottom: -61px;
  z-index: 111;
  right: -123px;
}
.approval-Pop14 {
  bottom: -14px;
}
.approval-Pop-box {
  background: #1e1e31;
  width: 260px;
  padding: 10px 10px 5px 10px;
  border-radius: 4px;
}

.approval-Pop-font {
  font-size: 12px;
  font-weight: 400;
  color: #a6a8b4;
  margin-bottom: 10px;
}
.approval-Pop-colk32C {
  color: #32ccaa;
}
.approval-Pop-colF7B {
  color: #f7b500;
}
.approval-Pop-colFF7 {
  color: #ff7085;
}
.approval-Pop-colfff {
  color: #fff;
}
.approval-Pop-pois {
  position: relative;
  width: 32px;
  height: 32px;
}
.approval-Pop-abso {
  position: absolute;
  bottom: 0;
  right: 0px;
}
.approval-Pop-font-left {
  text-align: right;
  margin-right: 5px;
}
.approval-Pop-triangle-up {
  width: 0;
  height: 0;
  margin-left: 15px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #1e1e31;
}
</style>
